<template>
  <div class="ogold">
    <section class="list-se">
      <div>姓名</div>
      <section>
        <x-input
          ref="username"
          name="username"
          v-model="form.name"
          placeholder="请输入姓名"
          is-type="china-name"
        ></x-input>
        <!-- <input
          type="text"
          v-model="form.name"
          placeholder="请输入姓名"
        > -->
      </section>
    </section>
    <section class="list-se">
      <div>手机号</div>
      <section>
        <x-input
          name="mobile"
          ref="mobile"
          v-model="form.phone"
          placeholder="请输入手机号码"
          keyboard="number"
          is-type="china-mobile"
        ></x-input>
        <!-- <input
          type="text"
          v-model="form.phone"
          placeholder="请输入手机号"
        > -->
      </section>
    </section>
    <section class="list-se">
      <div>银行</div>
      <section>
        <popup-picker
          value-text-align="left"
          :data="list1"
          v-model="bank_card"
          @on-change="onChange"
          placeholder="请选择银行"
        ></popup-picker>
      </section>
    </section>
    <section class="list-se">
      <div>银行卡号</div>
      <section>
        <x-input
          name="bank_card_code"
          ref="bank_card_code"
          v-model="form.bank_card_code"
          placeholder="请输入银行卡号"
          type="number"
          :is-type="checkIdcard"
        ></x-input>
      </section>
    </section>
    <section class="list-se">
      <div>开户地址</div>
      <section>
        <x-input
          :is-type="checkIdaddress"
          name="address"
          ref="address"
          v-model="form.address"
          placeholder="请输入开户地址"
          keyboard="number"
        ></x-input>
        <!-- <input
          v-model="form.address"
          type="text"
          placeholder="请输入开户地址"
        > -->
      </section>
    </section>
    <p class="tishi">
      *请确认您的银行卡信息无误，以免影响提现。每个自然月可修改1次
    </p>
    <div class="anniu-box">
      <x-button
        @click.native="tijiaobiaodan"
        :disabled="formdisabled === false"
      >保存</x-button>
    </div>
    <div
      class="zhezhao-marsk"
      v-if="staue"
      @click="staue = false"
    >
      <div>
        <img :src=tishiimg>
      </div>
      <p>{{tishi}}</p>
    </div>
  </div>
</template>

<script>
import { PopupPicker, XButton, XInput } from 'vux'
import { usercardbank, isbankcard } from '@/api/center'
import {
  mapState
} from 'vuex'
export default {
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id
    })
  },
  components: {
    PopupPicker,
    XButton,
    XInput
  },
  watch: {
    form: {
      deep: true,
      handler: function (newVal) {
        let arr = []
        this.form.bank_card = this.bank_card[0]
        for (let prop in newVal) {
          if (newVal[prop] !== '') {
            arr.push(newVal[prop])
          }
        }
        if (arr.length >= 5) {
          this.formdisabled = true
        }
      }
    },
    staue (newVal) {
      if (newVal === true) {
        setTimeout(() => {
          this.staue = false
        }, 1000)
      }
    }
  },
  data () {
    return {
      staue: false,
      tishi: '有信息未完善',
      tishiimg: 'https://o6wndwjxn.qnssl.com/%E5%93%AD%E8%84%B8@2x.png',
      formdisabled: false,
      bank_card: [],
      form: {
        name: '',
        phone: '',
        bank_card: '',
        address: '',
        bank_card_code: ''
      },
      list1: [['中国工商银行', '中国银行', '中国建设银行', '中国农业银行']]
    }
  },
  created () {
    this.chaxun()
  },
  methods: {
    chaxun () {
      let obj = {
        member_id: this.user_id
      }
      isbankcard(obj).then(res => {
        this.$store.commit('updateLoadingStatus', { isLoading: false })
        if (res.data.code === 200) {
          this.form = res.data.data
          this.bank_card.push(this.form.bank_card)
        }
      })
    },
    checkIdcard (value) {
      if (value.length >= 16 && value.length <= 19) {
        return { valid: true }
      } else {
        return { valid: false, msg: '银行卡格式有误' }
      }
    },
    checkIdaddress (value) {
      var reg = /^[0-9]+.?[0-9]*$/
      if (!reg.test(value)) {
        return { valid: true }
      } else {
        return { valid: false, msg: '地址格式有误' }
      }
    },
    onChange (val) {
      this.form.bank_card = this.bank_card[0]
    },
    tijiaobiaodan () {
      if (!this.$refs.username.valid || this.form.name === '') {
        // alert('名字不对')
        this.staue = true
        return false
      }
      if (!this.$refs.mobile.valid || this.form.phone === '') {
        // alert('手机号不对')
        this.staue = true
        return false
      }
      if (this.bank_card.length === 0) {
        // alert('选择银行')
        this.staue = true
        return false
      }
      if (!this.$refs.bank_card_code.valid || this.form.bank_card_code === '') {
        // alert('银行卡号不对')
        this.staue = true
        return false
      }
      if (!this.$refs.address.valid || this.form.address === '') {
        // alert('地址不对')
        this.staue = true
        return false
      }
      console.log('result:' + this.$refs.mobile.valid)
      this.form.member_id = this.user_id
      usercardbank(this.form).then(res => {
        let { code, msg } = res.data
        if (code === 200) {
          // alert('保存成功')
          this.staue = true
          this.tishiimg = 'https://o6wndwjxn.qnssl.com/%E7%AC%91%E8%84%B8@2x.png'
          this.tishi = '保存成功'
        } else {
          this.staue = true
          this.tishi = msg
          // alert(msg)
        }
      })
    }
  }
}
</script>
<style>
.ogold /deep/ .vux-popup-picker-placeholder {
  color: #cccccc;
}
.ogold /deep/ .weui-cell {
  padding: 0px;
}
.ogold /deep/ .weui-btn{
  background: #DA4131;
  border-radius: calc(100vw * 38 / 750);
}
</style>

<style lang="less" scoped>
.zhezhao-marsk {
  width: calc(100vw * 240 / 750);
  height: calc(100vw * 240 / 750);
  opacity: 0.9;
  background: #3a3a3a;
  border-radius: calc(100vw * 4 / 750);
  position: fixed;
  top: 45%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
  z-index: 10;
  img {
    width: calc(100vw * 75 / 750);
    height: calc(100vw * 75 / 750);
    margin: calc(100vw * 70 / 750) auto 0 auto;
  }
  p {
    width: 80%;
    margin: 0 auto;
    font-family: PingFangSC-Regular;
    font-size: calc(100vw * 24 / 750);
    color: #ffffff;
    margin-top: calc(100vw * 10 / 750);
  }
}
.list-se {
  height: calc(100vw * 95 / 750);
  margin: 0 calc(100vw * 30 / 750);
  border-bottom: solid calc(100vw * 1 / 750) #eeeeee;
  display: flex;
}
.list-se div {
  flex: 0 0 calc(100vw * 182 / 750);
  height: calc(100vw * 94 / 750);
  line-height: calc(100vw * 94 / 750);
  font-family: PingFangSC-Regular;
  font-size: calc(100vw * 34 / 750);
  color: #333333;
}
.list-se section {
  flex: 1;
  input {
    height: calc(100vw * 93 / 750);
    line-height: calc(100vw * 94 / 750);
    font-family: PingFangSC-Regular;
    font-size: calc(100vw * 34 / 750);
    color: #cccccc;
    border: none;
    resize: none;
    width: 100%;
    padding: 0;
  }
  ::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    font-family: PingFangSC-Regular;
    font-size: calc(100vw * 34 / 750);
    color: #cccccc;
  }
  :-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    font-family: PingFangSC-Regular;
    font-size: calc(100vw * 34 / 750);
    color: #cccccc;
  }
  ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    font-family: PingFangSC-Regular;
    font-size: calc(100vw * 34 / 750);
    color: #cccccc;
  }
  :-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    font-family: PingFangSC-Regular;
    font-size: calc(100vw * 34 / 750);
    color: #cccccc;
  }
}
.tishi {
  font-family: PingFangSC-Regular;
  font-size: calc(100vw * 24 / 750);
  width: calc(100vw * 686 / 750);
  color: #f56c6c;
  margin-left: calc(100vw * 30 / 750);
  margin-top: calc(100vw * 40 / 750);
}
.anniu-box {
  margin: 0 calc(100vw * 30 / 750);
  margin-top: calc(100vw * 90 / 750);
}
</style>
